<template>
  <div>
    <p>你要购买商品的数量: {{ count }}</p>

    <!-- 
		1. 绑定事件
		 语法: v-on:事件名="少量代码"
		 语法: v-on:事件名="methods里函数名"
		 语法: v-on:事件名="methods里函数名(值)"
		 语法: @事件名="methods里函数名"
		 -->
    <button v-on:click="count++">+1</button>
    <button v-on:click="addFn">+1</button>
    <button @click="addCountFn(5)">+5</button>
    <button @click="sunFn">减少1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  // 2. 定义函数    methods是对象
  methods: {
    // 可以在对象中提供若干个函数
    addFn() {
      // 要修改count，不能直接去修改data中的数据
      this.count++;

      // 1.data中的数据会挂载到当前的vue组件实例对象上
      // 2.在methods的函数中，函数内的this指向当前的vue组件实例对象
      //3. 所以，就可以在函数内通过this访问到data中的数据了
    },
    addCountFn(num) {
      this.count += num;
    },
    sunFn() {
      this.count--;
    },
  },
};
</script>

<style>
</style>
